<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超市狂欢购</title>
    <link rel="stylesheet" href="../style/base_zt.css">
    <style>
        /* by Jsung 2017-9-13 */

        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
            background: url("../images/shopping-spree/bg-img.png");
            font-family: '微软雅黑'
        }

        .ib {
            display: inline-block
        }

        .mt {
            margin: 22px 0;
        }
        /* 版心 */

        .wrapper {
            width: 1024px;
            margin: 0 auto;
        }

        .spree-top {
            position: relative;
            height: 725px;
            width: 100%;
            margin-bottom: 110px;
            background: url('../images/shopping-spree/banner.png')no-repeat center/cover;
        }

        .spree-top div {
            position: absolute;
            bottom: -80px;
            left: 50%;
            height: 121px;
            width: 520px;
            background-color: red;
            margin-left: -260px;
            background: url('../images/shopping-spree/spring-title.png')no-repeat 0 -17px;
        }

        .price-top {
            display: flex;
            flex-direction: column;
            width: 100%;
            /* height: 510px; */
            border-radius: 10px;
            background-color: #EBE8F3;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 17px 37px;
        }

        .price-top-title {
            height: 60px;
            width: 354px;
            background: url('../images/shopping-spree/icon-spring.png')no-repeat -18px -176px;
        }

        .price-top-body {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .price-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 392px;
            width: 32.8%;
            background-color: white;
            margin-top: 18px;
        }

        .price-card>a {
            flex: 1;
            max-height: 324px;
            position: relative;
        }

        .price-card>a span {
            position: absolute;
            width: 100%;
            height: 30px;
            background-color: rgba(0, 0, 0, .8);
            bottom: 0;
            left: 0;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            color: #fff;
            box-sizing: border-box;
            padding: 0 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price-card img {
            height: 100%;
            width: 100%;
        }

        .price-card>div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 68px;
            background-color: #A161DC;
        }

        .price-card-price {
            padding-left: 25px;
        }

        .price-card-num {
            font-size: 34px;
            color: #fff;
        }

        .price-card-price>div:first-child {
            font-size: 16px;
            color: #311D45;
        }

        .price-card-price>div:last-child {
            font-size: 16px;
            color: #fff;
        }

        .price-card>div>span {
            height: 55px;
            width: 0;
            border-left: 1px solid #6312AE;
            border-right: 1px solid #CA90FF;
        }

        .order-now {
            position: relative;
            font-size: 18px;
            color: #fff;
            padding-right: 60px;
        }

        .order-now::after {
            content: '';
            position: absolute;
            top: 15px;
            right: 35px;
            height: 24px;
            width: 15px;
            background: url('../images/shopping-spree/icon-spring.png')no-repeat -370px -33px;
        }
        /* 超市狂欢购 */

        .supermarket-header {
            margin: 0 auto;
            height: 121px;
            width: 520px;
            background: url('../images/shopping-spree/spring-title.png')no-repeat 0 -182px;
        }

        .house-home {
            background-position: 0 -343px;
        }

        .supermarket {
            width: 100%;
        }

        .supermarket-tab {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .supermarket-tab li {
            height: 60px;
            width: 328px;
            background: url('../images/shopping-spree/icon-spring.png')no-repeat -15px -97px;
            text-align: center;
            line-height: 60px;
            font-size: 28px;
            color: #fff;
            cursor: pointer;
        }

        .supermarket-tab li.supermarket-tab-curr {
            background-position: -17px -18px;
        }
        /* 返回顶部 */

        .scroll-top {
            margin: 0 auto;
            height: 193px;
            width: 204px;
            background: url('../images/shopping-spree/icon-spring.png')no-repeat -434px -45px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="spree-top">
        <div></div>
    </div>
    <div class="wrapper">
        <!-- 99元区 -->
        <div class="price-top mt">
            <div class="price-top-title bp-99"></div>
            <div class="price-top-body price-top-body-99">
            </div>
        </div>
        <!-- 日化母婴 -->
        <div class="supermarket-header"></div>
        <div class="supermarket">
            <ul class="price-top mt">
                <ul class="supermarket-tab infant-mom">
                    <li class="supermarket-tab-curr">18.9元专区</li>
                    <li>29元专区</li>
                    <li>59元专区</li>
                </ul>
                <div class="price-top-body price-top-body-mom">
                </div>
        </div>
        <!-- 家居家纺 -->
        <div class="supermarket-header house-home"></div>
        <div class="supermarket">
            <ul class="price-top mt">
                <ul class="supermarket-tab home-design">
                    <li class="supermarket-tab-curr">49元专区</li>
                    <li>89元专区</li>
                    <li>199元专区</li>
                </ul>
                <div class="price-top-body price-top-body-home">
                </div>
        </div>
        <!-- scroll to top -->
        <div class="scroll-top"></div>
    </div>
    </div>
    <!-- 商品卡片模板 start -->
    <script type="text/html" id="card-template">
        {{each $data}}
        <div class="price-card">
            <a href="javascript:;" class='C_J_good' data-id='{{$value.id}}'>
                <img src="{{$value.pic}}" alt="">
                <span>{{$value.name}}</span>
            </a>
            <div>
                <div>
                    <div class="price-card-price ib">
                        <div>原价￥
                            <span>{{$value.price_on_tag}}</span>
                        </div>
                        <div>一口价：￥</div>
                    </div>
                    <div class="ib price-card-num">{{$value.discountPrice}}</div>
                </div>
                <span></span>
                <a href="javascript:;" class='C_J_good' data-id='{{$value.id}}'>
                    <div class="order-now">
                        <div>立即</div>
                        <div>抢购</div>
                    </div>
                </a>
            </div>
        </div>
        {{/each}}
    </script>
    <!-- 商品卡片模板 end -->

</body>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../js/art-template.js"></script>
<script src="../../js/login.js"></script>
<script src="../../js/model.js"></script>
<script src="../../js/model-citizen.js"></script>

<script>
    /* by Jsung */
    var info = [
        [
            [113317, 142354, 138970, 125544, 135091, 141718]
        ],
        [
            [41073, 60628, 123542, 95431, 125001, 142638],
            [131169, 84343, 73891, 35316, 99486, 142553],
            [73903, 131621, 131302, 123538, 142830, 138613]
        ],
        [
            [123875, 129126, 128206, 140943, 107494, 146564],
            [140179, 106872, 112163, 124162, 141299, 125148],
            [121600, 131752, 135017, 131922, 138501, 119202]
        ]
    ];

    (function ($, template, info) {
        init(info)

        function init(info) {
            templateRender(info[0][0], $('.price-top-body-99'))
            templateRender(info[1][0], $('.price-top-body-mom'))
            templateRender(info[2][0], $('.price-top-body-home'))
        }

        function getData(id, href, container) {
            $.ajax({
                url: 'http://www.cjwsc.com/qcwdProduct/getProductByIds',
                data: {
                    ids: id,
                    business_type: 10,
                    client_type: 1
                },
                dataType: "jsonp",
                jsonp: 'jsonpcallback',
                success: function (res) {
                    res.msg[0].href = href;
                    res.msg[0].pic = res.msg[0].pic.replace('240_240','800_800')
                    container.append(template('card-template', res.msg))
                }
            })
        }

        function templateRender(_id, container) {
            // 请求并渲染数据
            _id.forEach(function (v) {
                var href = 'http://www.cjwsc.com/item/' + v + '.html'
                getData(v, href, container)
            });
        }

        // 超市狂欢购 tab 栏切换
        $('.infant-mom').on('click', 'li', function () {
            var $this = $(this),
                container = $('.price-top-body-mom');
            $this.addClass('supermarket-tab-curr').siblings().removeClass('supermarket-tab-curr')
            container.html('')
            templateRender(info[1][$this.index()], container)
        })
        $('.home-design').on('click', 'li', function () {
            var $this = $(this),
                container = $('.price-top-body-home');
            $this.addClass('supermarket-tab-curr').siblings().removeClass('supermarket-tab-curr')
            container.html('')
            templateRender(info[2][$this.index()], container)
        })
        // 返回顶部按钮
        $('.scroll-top').on('click', function () {
            console.log($('.wrapper').offset().top);
            $('html').animate({
                scrollTop: 0
            }, 500)
        })

    })($, template, info);
</script>

</html>